<div id="config-tool" class="closed">
    <a id="config-tool-cog">
        <i class="fa fa-cog"></i>
    </a>
    
    <div id="config-tool-options">
        <h4>布局设置</h4>
        <ul>
            <li>
                <div class="checkbox-nice">
                    <input type="checkbox" id="config-fixed-header">
                    <label for="config-fixed-header">
                    固定顶部
                    </label>
                </div>
            </li>
            <li>
                <div class="checkbox-nice">
                    <input type="checkbox" id="config-fixed-sidebar">
                    <label for="config-fixed-sidebar">
                    固定左侧菜单
                    </label>
                </div>
            </li>
            <li>
                <div class="checkbox-nice">
                    <input type="checkbox" id="config-fixed-footer">
                    <label for="config-fixed-footer">
                    固定底部
                    </label>
                </div>
            </li>
            <li>
                <div class="checkbox-nice">
                    <input type="checkbox" id="config-boxed-layout">
                    <label for="config-boxed-layout">
                    居中布局
                    </label>
                </div>
            </li>
            <li>
                <div class="checkbox-nice">
                    <input type="checkbox" id="config-rtl-layout">
                    <label for="config-rtl-layout">
                    左右位置调换
                    </label>
                </div>
            </li>
        </ul>
        
        <br>
        
        <h4>主题颜色</h4>
        <ul id="skin-colors" class="clearfix">
            <li>
                <a class="skin-changer" 
                    data-skin="theme-navyBlue" 
                    data-toggle="tooltip" 
                    title="Navy Blue" 
                    style="background-color: #34495e;">
                </a>
            </li>
            <li>
                <a class="skin-changer" 
                    data-skin="theme-white" 
                    data-toggle="tooltip" 
                    title="White/Green" 
                    style="background-color: #2ecc71;">
                </a>
            </li>
            <li>
                <a class="skin-changer blue-gradient" 
                    data-skin="theme-blue-gradient" 
                    data-toggle="tooltip" 
                    title="Gradient">
                </a>
            </li>
            <li>
                <a class="skin-changer" 
                    data-skin="theme-greenSea" 
                    data-toggle="tooltip" 
                    title="Green Sea" 
                    style="background-color: #6ff3ad;">
                </a>
            </li>
            <li>
                <a class="skin-changer" 
                    data-skin="theme-amethyst" 
                    data-toggle="tooltip" 
                    title="Amethyst" 
                    style="background-color: #9b59b6;">
                </a>
            </li>
            <li>
                <a class="skin-changer" 
                    data-skin="theme-blue" 
                    data-toggle="tooltip" 
                    title="Blue" 
                    style="background-color: #7FC8BA;">
                </a>
            </li>
            <li>
                <a class="skin-changer" 
                    data-skin="theme-red" 
                    data-toggle="tooltip" 
                    title="Red" 
                    style="background-color: #e74c3c;">
                </a>
            </li>
            <li>
                <a class="skin-changer" 
                    data-skin="theme-whbl" 
                    data-toggle="tooltip" 
                    title="White/Blue" 
                    style="background-color: #1ABC9C;">
                </a>
            </li>
        </ul>
    </div>
</div>
